<template>
    <view class="content">
        <view class="goods-list">
			<view class="goods-wrap" v-for="(item, index) in tabList[active].list">
				<million-item
				        :millionItem="item"
				        :key="item.gid"
				        type="limit"
				        @onCopySuccess="onCopySuccess"
				></million-item>
			</view>

            <!-- 商品骨架 -->
            <template v-for="i in ['a', 'b', 'c', 'd']">
                <view class="skeleton-wrap" v-if="
					tabList[active].list.length === 0 &&
					!tabList[active].finished &&
					!tabList[active].empty">
                    <skeleton class="goods-skeleton" :loading="true" avatarShape="square" :row="4" avatarSize="254rpx"></skeleton>
                </view>
            </template>
        </view>

        <!-- 加载中插件 -->
        <view class="load-status">
            <load-more status="loading" color="#c6c6c6" iconType="circle" v-if="!tabList[active].finished && !tabList[active].empty"
                       :contentText="contentText"></load-more>
            <load-more status="noMore" color="#c6c6c6" v-if="tabList[active].finished" :contentText="contentText"></load-more>
            <empty v-if="tabList[active].empty"></empty>
        </view>

        <!-- 回到顶部 -->
        <view class="scrollTop" :class="[{ show: isShowScrollTop }]" @tap="backTop">
            <text class="iconfont icon-huidaodingbu"></text>
        </view>
    </view>
</template>

<script>
    import Empty from "@/components/Empty";
    import MillionItem from "@/components/MillionItem";
    import Skeleton from '@/components/uni/Skeleton';
    import LoadMore from "@/components/uni/LoadMore";
    import loader from '@/utils/mixin/loader';
    export default {
        name: "index",
        mixins: [loader],
        components: {
            LoadMore,
            Empty,
            MillionItem,
            Skeleton,
        },
        async onLoad() {
            this.initPage();
			
			uni.reportAnalytics('enter_xiangshixianliangqg', {
				enter_xiangshixianliangqg: '进入限时限量抢购页面'
			});
        },
        methods: {
            initPage() {
                uni.showLoading({
                    title: '加载中...'
                });
                this.loadMore(this.tabList[0]);
            },
            beforeLoader(item) {
                this.params.isBybt = true;
                this.service = this.$service.million.bwbtGoods.marketGoods(this.params);
                return true;
            },
            onCopySuccess(tkl, refresh) {
                my.navigateToMiniProgram({
                    appId: '2018091261350219',
                    path: `/pages/h5pages/h5pages?targetURI=${tkl}`
                });

                if (refresh) {
                    setTimeout(() => {
                        this.onRefresh(this.tabList[this.active]);
                    }, 2000)
                }
            },
        },
    }
</script>

<style lang="scss" scoped>
    .content {
        .goods-list {
			.goods-wrap {
				padding-top: 20rpx;
			}
            .skeleton-wrap {
                background: #fff;
                width: 704rpx;
                margin: 0 auto;
                margin-top: 20rpx;
                border-radius: 16rpx;
            }
        }
    }
</style>